<script lang="ts" setup>
import {onMounted} from 'vue'
onMounted(()=>{
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 
window.addEventListener('resize',autoFix)
})
let autoFix=()=>{
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 
  console.log(document.documentElement.style.fontSize,document.documentElement.clientWidth);
}
import { useRouter } from 'vue-router';
import { reactive, ref } from 'vue';
let perms=reactive(JSON.parse(sessionStorage.getItem('perms')));
let openFix=ref(false)
const router = useRouter();
const toLogin=()=>{
  sessionStorage.clear();
  router.push('/');
}
let changeFix=()=>{
  window.removeEventListener('resize',autoFix)
}
</script>
<template>
  <el-container>
    <el-header>
      <div class="title">
        <div class="titleCenter">
          <img
            src="https://ts1.cn.mm.bing.net/th/id/R-C.d570a8e82204475ed2ad999e099d41eb?rik=hWc%2bHbpX0%2bz2oA&riu=http%3a%2f%2fimg3.redocn.com%2f20090917%2f20090917_78913f445cf71ae8367eVmVVS20NXEhO.jpg&ehk=rSYY1lcNHMpPr7gyJQUxXyLBMhM6sVCimtiX5cJN5gw%3d&risl=&pid=ImgRaw&r=0"
            alt="医院头像" />
          <span>&nbsp;在线预约管理后台</span>
        </div>
  <br />
  
      </div>
      <!-- <div @click="changeFix" style="border-radius: 1rem; text-align: center; position: fixed;top: 1.1rem; left: 16rem; width: 7rem; height: 1.5rem; font-size: 0.8rem;line-height: 1.5rem; background-color: white;">自适应大小：开</div> -->
      <div class="title">
        <div class="titleCenter">
          <img src="https://img.zcool.cn/community/01bec85857a107a8012060c8a045ab.jpg@2o.jpg" alt="用户头像" />
          <span>&nbsp;&nbsp;admin&nbsp;&nbsp;</span>
          <el-icon class="zlj-edit" @click="toLogin"><i-ep-SwitchButton /></el-icon>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="15rem">
        <el-scrollbar>
          <el-menu :router="true">
            <el-sub-menu index="1" v-if="perms.includes('Home:merchan')||perms.includes('Home:items')||perms.includes('admin')">
              <template #title>
                <el-icon><i-ep-MessageBox class="iconSize" /></el-icon><span class="SecTitle">体检商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-if="perms.includes('Home:merchan')||perms.includes('admin')" index="/Home/merchan"><span class="SecTitle">体检套餐管理</span></el-menu-item>
                <el-menu-item v-if="perms.includes('Home:items')||perms.includes('admin')" index="/Home/items"><span class="SecTitle">体检项管理</span></el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2" v-if="perms.includes('Home:AppInfoQuery')||perms.includes('Home:PhyOrgan')||perms.includes('admin')">
              <template #title>
                <el-icon><i-ep-Expand /></el-icon><span class="SecTitle">体检信息管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-if="perms.includes('Home:AppInfoQuery')||perms.includes('admin')" index="/Home/AppInfoQuery"><span class="SecTitle">预约信息查询</span></el-menu-item>
                <el-menu-item v-if="perms.includes('Home:PhyOrgan')||perms.includes('admin')" index="/Home/PhyOrgan"><span class="SecTitle">体检机构管理</span></el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3" v-if="perms.includes('Home:target')||perms.includes('Home:OrganTarget')||perms.includes('admin')">
              <template #title>
                <el-icon><i-ep-DataLine /></el-icon><span class="SecTitle">体检指标管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-if="perms.includes('Home:target')||perms.includes('admin')" index="/Home/target"><span class="SecTitle">标准指标管理</span></el-menu-item>
                <el-menu-item v-if="perms.includes('Home:OrganTarget')||perms.includes('admin')" index="/Home/OrganTarget"><span class="SecTitle">机构指标管理</span></el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="4" v-if="perms.includes('Home:GroupCompany')||perms.includes('Home:GroupDetail')||perms.includes('admin')">
              <template #title>
                <el-icon><i-ep-Coin /></el-icon><span class="SecTitle">团检管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-if="perms.includes('Home:GroupCompany')||perms.includes('admin')" index="/Home/GroupCompany"><span class="SecTitle">团检信息管理</span></el-menu-item>
                <el-menu-item v-if="perms.includes('Home:GroupDetail')||perms.includes('admin')" index="/Home/GroupDetail"><span class="SecTitle">团检详情管理</span></el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="5" v-if="perms.includes('admin')">
              <template #title>
                <el-icon><i-ep-Setting /></el-icon><span class="SecTitle">系统管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/Home/AdminManage"><span class="SecTitle">管理员管理</span></el-menu-item>
                <el-menu-item index="/Home/RoleController"><span class="SecTitle">角色管理</span></el-menu-item>
                <el-menu-item index="/Home/AdminMenu"><span class="SecTitle">菜单管理</span></el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
.zlj-edit{
  cursor: pointer;
}
.el-container {
  background-color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;

  .el-header {
    background-color: rgb(50, 64, 87);
    width: 100%;
    height: 4rem;
    padding: 0;
    display: flex;
    justify-content: space-between;

    .title {
      height: 100%;
      width: 15rem;
      color: white;
      font-size: 1.2rem;
      padding-top: 1rem;
      display: flex;
      justify-content: space-evenly;

      .el-icon {
        position: relative;
        top: 0.3rem;
        font-size: 1.5rem;

      }

      img {
        height: 2rem;
        width: 2rem;
        background-color: aliceblue;
        border-radius: 10rem;
        vertical-align: middle;
      }
    }
  }

  .el-aside {
    background-color: rgb(255, 255, 255);

    .SecTitle {
      font-size: 1rem;
    }

    :deep(.el-sub-menu__title) {
      height: 5rem;
      padding: 0 4rem 0 2rem;
    }

    .el-icon {
      font-size: 1.5rem;
      width: 2rem;
      margin: 0.5rem;
    }

    :deep(.el-sub-menu__icon-arrow) {
      font-size: 1.5rem;
      width: 2rem;
      margin: -0.6rem 0;
      right: 2rem;
    }

    :deep(.el-menu-item) {
      height: 3rem;
      padding: 0 2rem 0 4rem;
    }

    :deep(.el-menu-item-group__title) {
      padding: 0rem 0 0rem 4rem;
      margin-bottom: 0rem;
    }
  }

  .el-main {
    background-color: rgb(245, 247, 250);
    padding: 0;
  }
}
</style>

